<template>
  <div class="common-condition-form">
    <el-form ref="gradeForm" label-width="140px" :model="gradeForm" :rules="rules">
      <el-row>
        <el-col :span="24">
          <condition-or-action
           ref="conditionRef"
           v-model="gradeForm.conditionObj"
           :itemData="alarmConditionOption"
           :alarmFirstList="conditionMonitorList"
           :alarmSecondList="alarmConditionList"
           :eqptTypeId="eqptTypeId"
           @change="handleChange"
          />
        </el-col>
        <el-col :span="24">
          <el-form-item style="margin-top: -20px" prop="conditionTriggerLinkageType">
            <el-select placeholder="请选择匹配条件" filterable v-model="gradeForm.conditionTriggerLinkageType" :disabled="shareData.isDisable" size="small" style="width: 100%" @change="handleChange">
              <el-option
                v-for="item in linkageType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="conditionTriggerFrequencyType">
            <el-select placeholder="请选择触发条件" filterable v-model="gradeForm.conditionTriggerFrequencyType" :disabled="shareData.isDisable" size="small" style="width: 100%" @change="handleChange">
              <el-option
                v-for="item in frequencyType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="告警触发时间：" prop="triggerPeriodType">
            <el-select placeholder="请选择告警触发时间" filterable v-model="gradeForm.triggerPeriodType" :disabled="shareData.isDisable" size="small" style="width: 100%" @change="handleChange">
              <el-option
                v-for="item in triggerTimeType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <trigger-time-form
            ref="triggerTimeRef"
            v-model="gradeForm.triggerTime"
            :loopType="loopType"
            @change="handleChange"
          />
        </el-col>
        <el-col :span="24">
          <el-form-item label="告警触发动作：" class="alarm-top" prop="triggerActionType">
            <el-select placeholder="请选择告警触发动作" filterable v-model="gradeForm.triggerActionType" :disabled="shareData.isDisable" size="small" style="width: 100%" @change="handleChange">
              <el-option
                v-for="item in triggerActionType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <trigger-action-form
            ref="triggerActionRef"
            v-model="gradeForm.triggerAction"
            :actionType="actionType"
            :workTypeList="workTypeList"
            @change="handleChange"
          />
        </el-col>
        <el-col :span="24">
          <el-form-item label="告警消息：" class="alarm-top">
            <el-input placeholder="xx类型设备 编号xx 监测到 xx、xx、xx属性值异常，触发告警" filterable v-model="gradeForm.contentTemplate" disabled size="small" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <condition-or-action
            ref="actionRef"
            v-model="gradeForm.actionObj"
            :itemData="alarmActionOption"
            :alarmFirstList="actionTypeList"
            :alarmSecondList="actionMonitorList"
            :alarmEqptList="alarmEqptList"
            :eqptTypeId="eqptTypeId"
            :eqptTypeList="eqptTypeList"
            :allAlarmEqptList="allAlarmEqptList"
            @change="handleChange"
          />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import ConditionOrAction from './ConditionOrAction'
import { queryAlarmConditionList } from '../../js/alarmStrategy'
import TriggerTimeForm from './TriggerTimeForm.vue'
import TriggerActionForm from './TriggerActionForm'

// 校验规则
const rules = {
  conditionTriggerLinkageType: [{ required: true, message: '请选择匹配条件', trigger: 'change' }],
  conditionTriggerFrequencyType: [{ required: true, message: '请选择触发条件', trigger: 'change' }],
  triggerPeriodType: [{ required: true, message: '请选择告警触发时间', trigger: 'change' }],
  triggerActionType: [{ required: true, message: '请选择触发动作类型', trigger: 'change' }]
}
export default {
  name: 'CommonConditionForm',
  inject: ['shareData'],
  components: { ConditionOrAction, TriggerTimeForm, TriggerActionForm },
  model: {
    prop: 'alarmData',
    event: 'change'
  },
  props: {
    alarmData: {
      type: Object
    },
    conditionMonitorList: {
      type: Array,
      default: () => ([])
    },
    actionMonitorList: {
      type: Array,
      default: () => ([])
    },
    contentTemplateEqptNo: {
      type: String,
      default: ''
    },
    contentTemplateEqptType: {
      type: String,
      default: ''
    },
    alarmEqptList: {
      type: Array,
      default: () => ([])
    },
    eqptTypeId: {
      type: String,
      default: ''
    },
    workTypeList: {
      type: Array,
      default: () => ([])
    },
    allAlarmEqptList: {
      type: Array,
      default: () => ([])
    },
    eqptTypeList: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      rules,
      alarmConditionOption: {
        title: '告警触发条件',
        placeholder1: '请选择监测属性',
        placeholder2: '请选择判断条件'
      },
      alarmActionOption: {
        title: '告警联动动作',
        placeholder1: '请选择触发类型',
        placeholder2: '请选择监测属性'
      },
      linkageType: [ // 告警触发条件 - 匹配条件下拉数据
        { label: '匹配以上所有条件(逻辑且 and &&)', value: 1 },
        { label: '匹配以上任一条件(逻辑或 or ||)', value: 0 }
      ],
      frequencyType: [ // 告警触发条件 - 触发条件下拉数据
        { label: '首次满足时触发', value: 0 },
        { label: '每次满足时触发', value: 1 }
      ],
      contentTemplateProperty: [],
      gradeForm: {
        conditionObj: {},
        actionObj: {},
        contentTemplate: '',
        triggerPeriodType: 0,
        triggerActionType: 0,
        triggerTime: {}
      },
      loopType: 0,
      actionType: 0,
      alarmConditionList: [], // 告警条件下拉数据
      actionTypeList: [ // 联动动作下拉数据
        { id: 0, name: '触发事件设备' },
        { id: 1, name: '与触发事件设备同空间同类型设备' },
        { id: 2, name: '与触发事件设备同空间同标签设备' },
        { id: 3, name: '指定具体设备' }
      ],
      triggerTimeType: [ // 触发时间类型
        { id: 0, name: '单次' },
        { id: 1, name: '每天' },
        { id: 2, name: '每周' },
        { id: 3, name: '每月' }
        // { id: 4, name: '每年' } // 暂时不做
      ],
      triggerActionType: [ // 触发动作类型
        { id: 0, name: '仅告警' },
        { id: 1, name: '告警并推送' },
        { id: 2, name: '告警并推送并生成工单' }
      ],
      oneWatch: true
    }
  },
  watch: {
    alarmData: {
      deep: true,
      immediate: true,
      handler () {
        if (this.shareData.title !== '新增自定义告警') {
          if (this.oneWatch) {
            this.gradeForm = { ...this.gradeForm, ...this.alarmData }
            this.oneWatch = false
          }
        }
      }
    },
    'gradeForm.triggerPeriodType': {
      immediate: true,
      handler () {
        this.loopType = this.gradeForm.triggerPeriodType
      }
    },
    'gradeForm.triggerActionType': {
      immediate: true,
      handler () {
        this.actionType = this.gradeForm.triggerActionType
      }
    },
    contentTemplateEqptType: {
      handler () {
        this.getContentTemplate(this.contentTemplateEqptType, this.contentTemplateEqptNo, this.contentTemplateProperty)
      }
    },
    contentTemplateEqptNo: {
      handler () {
        this.getContentTemplate(this.contentTemplateEqptType, this.contentTemplateEqptNo, this.contentTemplateProperty)
      }
    },
    'gradeForm.conditionObj': {
      immediate: true,
      deep: true,
      handler () {
        this.contentTemplateProperty = []
        if (this.gradeForm.conditionObj?.alarmConditionActionList?.length) {
          const { alarmConditionActionList } = this.gradeForm.conditionObj
          alarmConditionActionList.forEach(n => {
            this.conditionMonitorList.forEach(c => {
              if (n.selectFirstValue === c.id && n.deleteFlag !== 1) {
                this.contentTemplateProperty.push(c.paramMemo)
              }
            })
          })
        }
        this.getContentTemplate(this.contentTemplateEqptType, this.contentTemplateEqptNo, this.contentTemplateProperty)
      }
    }
  },
  methods: {
    handleChange () {
      this.$emit('change', this.gradeForm)
    },
    getContentTemplate (eqptType, eqptNo, property) {
      this.gradeForm.contentTemplate = `${eqptType}类型设备 编号${eqptNo} 监测到${property.join(',')}属性值异常，触发告警`
      this.handleChange()
    },
    async queryAlarmConditionList () {
      try {
        const res = await queryAlarmConditionList()
        if (res.code === 0) {
          this.alarmConditionList = res.data
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.queryAlarmConditionList()
  }
}
</script>
<style lang="scss" scoped>
.common-condition-form {
  .alarm-top {
    margin-top: -10px;
  }
  .el-col {
    .el-form-item {
      margin-bottom: 10px;
      ::v-deep {
        .el-form-item__error {
          padding-top: 0px;
        }
      }
    }
  }
}
</style>
